<template>
  <!-- 相关操作的代码太多了，干脆单拎出来当个组件 -->
  <!-- 添加停车计费规则的弹框 -->
  <el-dialog
    :visible="dialogVisible"
    width="680px"
    title="新增规则"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <!-- 表单接口 -->
    <div class="form-container">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        label-position="top"
      >
        <el-form-item label="计费规则编号" prop="ruleNumber">
          <el-input v-model="addForm.ruleNumber" />
        </el-form-item>
        <el-form-item label="计费规则名称" prop="ruleName">
          <el-input v-model="addForm.ruleName" />
        </el-form-item>
        <el-form-item label="计费方式" prop="chargeType">
          <el-radio-group v-model="addForm.chargeType" size="small">
            <!-- 同一个组的radio互斥，v-model收集的是label的值 -->
            <el-radio label="duration" border>时长收费</el-radio>
            <el-radio label="turn" border>按次收费</el-radio>
            <el-radio label="partition" border>分段收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <div
          class="flex-container"
          style="display: flex; justify-content: space-between"
        >
          <el-form-item label="免费时长">
            <!-- 免费时长无需校验，非必填 -->
            <el-input v-model="addForm.freeDuration" />
          </el-form-item>
          <el-form-item label="收费上限">
            <!-- 收费上限无需校验，非必填 -->
            <el-input v-model="addForm.chargeCeiling" />
          </el-form-item>
        </div>
        <!-- 计费规则的prop应当跟着chargeType走，所以得是动态的 -->
        <!-- :prop="feeRuleProp"在实际使用过程中会校验两次，有问题，暂时弃用，以required替代 -->
        <!-- required：是否必填（会显示红星），如不设置，则会根据校验规则自动生成 -->
        <el-form-item label="计费规则" required>
          <!-- 按时长收费区域 -->
          <!-- 这里得用v-if不能用v-show，因为涉及到校验，v-show只是隐藏元素，元素本身还在，仍会影响校验，而v-if是移除元素，确保元素绝对不会参与校验 -->
          <div
            v-if="addForm.chargeType === 'duration'"
            class="duration"
            style="display: flex"
          >
            每
            <!-- el-form-item可以继续嵌套el-form-item -->
            <el-form-item prop="durationTime">
              <el-input
                v-model="addForm.durationTime"
                class="input-box"
                style="width: 150px"
              />
            </el-form-item>
            小时
            <el-form-item prop="durationPrice">
              <el-input
                v-model="addForm.durationPrice"
                class="input-box"
                style="width: 150px"
              />
            </el-form-item>
            元
          </div>
          <!-- 按次收费区域 -->
          <div
            v-if="addForm.chargeType === 'turn'"
            class="turn"
            style="display: flex"
          >
            每次
            <el-form-item prop="turnPrice">
              <el-input
                v-model="addForm.turnPrice"
                class="input-box"
                style="width: 150px"
              />
            </el-form-item>
            元
          </div>
          <!-- 按分段收费区域 -->
          <div v-if="addForm.chargeType === 'partition'" class="partition">
            <div class="item" style="display: flex">
              <el-form-item prop="partitionFrameTime">
                <el-input
                  v-model="addForm.partitionFrameTime"
                  class="input-box"
                  style="width: 100px"
                />
              </el-form-item>
              小时内,每小时收费
              <el-form-item prop="partitionFramePrice">
                <el-input
                  v-model="addForm.partitionFramePrice"
                  class="input-box"
                  style="width: 100px"
                />
              </el-form-item>
              元
            </div>
            <div class="item" style="display: flex; margin: 30px auto 0">
              每增加
              <el-form-item prop="partitionIncreaseTime">
                <el-input
                  v-model="addForm.partitionIncreaseTime"
                  class="input-box"
                  style="width: 100px"
                />
              </el-form-item>
              小时,增加
              <el-form-item prop="partitionIncreasePrice">
                <el-input
                  v-model="addForm.partitionIncreasePrice"
                  class="input-box"
                  style="width: 100px"
                />
              </el-form-item>
              元
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit"> 确 定 </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addRuleAPI } from '@/api/feeRule.js'
export default {
  name: 'AddFeeRule',
  props: {
    dialogVisible: { required: true, default: false, type: Boolean }
  },
  data () {
    return {
      // 添加计费规则的表单弹框
      addForm: {
        // id: null, // 计费规则id
        ruleNumber: '', // 计费规则编号
        ruleName: '', // 计费规则名称
        freeDuration: '', // 免费时长，单位:分钟
        chargeCeiling: '', // 收费上限
        chargeType: 'duration', // 收费类型，时长收费:duration,按次收费:turn,分段收费:partition
        durationTime: '', // 分段计费，时间数
        durationPrice: '', // 分段计费，单价
        durationType: 'hour', // 时长收费类型 minute:分钟，hour:小时
        turnPrice: '', // 按次收费：每次价格
        partitionFrameTime: '', // 分段收费:段内时间
        partitionFramePrice: '', // 分段收费:段内费用
        partitionIncreaseTime: '', // 分段收费:超出时间
        partitionIncreasePrice: '' // 分段收费:超出范围收费价钱
      },
      addFormRules: {
        // 免费时长和收费上限无需校验，非必填
        ruleNumber: [
          { required: true, message: '请输入规则编号', trigger: 'blur' }
        ],
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        chargeType: [
          { required: true, message: '请选择收费类型', trigger: 'blur' }
        ],
        durationTime: [
          { required: true, message: '请输入时间', trigger: 'blur' }
        ],
        durationPrice: [
          { required: true, message: '请输入金额', trigger: 'blur' }
        ],
        turnPrice: [{ required: true, message: '请输入次数', trigger: 'blur' }],
        partitionFrameTime: [
          { required: true, message: '请输入段内时间', trigger: 'blur' }
        ],
        partitionFramePrice: [
          { required: true, message: '请输入段内费用', trigger: 'blur' }
        ],
        partitionIncreaseTime: [
          { required: true, message: '请输入超出时间', trigger: 'blur' }
        ],
        partitionIncreasePrice: [
          { required: true, message: '请输入超出金额', trigger: 'blur' }
        ]
      }
      // 暂时弃用
      // feeRuleProp: 'durationTime' // 随便给个默认值，确保计费规则有红星
    }
  },
  watch: {
    // 每次切换计费方式单选框时，都要清掉下方计费规则处的校验，确保刚切过来时不显示校验提示
    // 可以通过radio-group提供的change事件来判断是否切换了单选框，这里为了练习使用侦听
    'addForm.chargeType' (val) {
      // console.log(val)
      // if (val === 'duration') {
      //   // 计费方式为“时长收费”时，去掉另外5个输入框的校验
      //   // this.$refs.addForm.clearValidate([
      //   //   'turnPrice',
      //   //   'partitionFrameTime',
      //   //   'partitionFramePrice',
      //   //   'partitionIncreaseTime',
      //   //   'partitionIncreasePrice'
      //   // ])
      //   // 暂时弃用
      //   this.feeRuleProp = 'durationTime' // 在durationTime和durationPrice里随便给个值
      // }
      // if (val === 'turn') {
      //   // 计费方式为“按次收费”时，去掉另外6个输入框的校验
      //   // this.$refs.addForm.clearValidate([
      //   //   'durationTime',
      //   //   'durationPrice',
      //   //   'partitionFrameTime',
      //   //   'partitionFramePrice',
      //   //   'partitionIncreaseTime',
      //   //   'partitionIncreasePrice'
      //   // ])
      //   // 暂时弃用
      //   this.feeRuleProp = 'turnPrice'
      // }
      // if (val === 'partition') {
      //   // 计费方式为“分段收费”时，去掉另外3个输入框的校验
      //   // this.$refs.addForm.clearValidate([
      //   //   'durationTime',
      //   //   'durationPrice',
      //   //   'turnPrice'
      //   // ])
      //   // 暂时弃用
      //   this.feeRuleProp = 'partitionFrameTime' // 在partitionFrameTime、partitionFramePrice、partitionIncreaseTime、partitionIncreasePrice里随便给个值
      // }
      // 上面这种写法太麻烦，干脆简单粗暴一些，每次切换计费方式，不管切换成什么，都清掉全部7个输入框的校验
      // clearValidate方法：移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
      this.$refs.addForm.clearValidate([
        'durationTime',
        'durationPrice',
        'turnPrice',
        'partitionFrameTime',
        'partitionFramePrice',
        'partitionIncreaseTime',
        'partitionIncreasePrice'
      ])
    }
  },
  created () {
    console.log('父组件', this.$parent) // 获取父级组件
  },
  methods: {
    // 关闭弹框
    closeDialog () {
      this.$refs.addForm.resetFields()
      // 免费时长和收费上限是非必填项，没绑定prop，不参与整体校验及重置，得手动重置
      this.addForm.freeDuration = ''
      this.addForm.chargeCeiling = ''
      // 子组件不能修改父组件中传过来的数据
      // this.dialogVisible = false
      // 1.子传父
      // 2.this.$parent
      // this.$parent.dialogVisible = false
      // 3. .sync 子组件和父组件中的数据进行双向绑定（父组件加上.sync之后表示放权给子组件修改props中的数据）
      this.$emit('update:dialogVisible', false)
    },
    // 提交弹框
    submit () {
      this.$refs.addForm.validate(async flag => {
        if (!flag) return
        const res = await addRuleAPI(this.addForm)
        console.log('添加计费规则', res)
        this.$message.success('添加成功')
        // 子组件调用父组件中的方法：
        // 1.this.$parent
        // this.$parent.getRuleList()
        // 2.this.$emit('自定义事件名')
        this.$emit('getRuleList')
        this.closeDialog()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  padding: 0px 80px;
}
</style>
